 /*
 * @description: 组件控制修改(装修首页)
 * @Author: along
 * @Date: 2021-06-11
 * @Last Modified by: along
 * @Last Modified time: 2021-06-16
 */
<template>
    <div
        class="edit editControlActive"
        v-if="showEdit && showControl"
        v-loading="loading"
        :style="{top: top + 'px'}"
    >
        <!-- 计算轮播高度使用 -->
        <div
            id="box"
            :style="{display: 'block', height: 'auto'}"
        />

        <div
            v-if="Number(type) == 0"
            class="edit-wrap"
        >
            <div class="edit-title">
                <p class="edit-title-text">页面标题</p>
            </div>
            <div class="wrap-content">
                <div class="wrap-list">
                    <p class="name">页面名称</p>
                    <el-input
                        type="text"
                        placeholder="请输入内容"
                        v-model="row.title"
                        maxlength="8"
                        show-word-limit
                        class="wrap-title-text"
                        size="small"
                        :style="{width: '255px'}"
                    />
                </div>
                <div
                    class="wrap-list"
                    :style="{marginBottom: '8px'}"
                >
                    <p class="name">有效时间</p>
                    <el-date-picker
                        v-model="date"
                        type="datetimerange"
                        size="small"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :style="{width: '255px', marginLeft: '17px'}"
                        :disabled="langDate"
                    />
                </div>
                <el-checkbox
                    v-model="langDate"
                    :style="{marginLeft: '103px', marginBottom: '24px'}"
                >长期有效</el-checkbox>
            </div>
        </div>

        <!-- 单列图片 -->
        <div
            v-if="Number(type) == 1 && JSON.stringify(controList) !== '{}'"
            class="edit-wrap"
        >
            <div class="edit-title">
                <p class="edit-title-text">单列图片</p>
            </div>
            <div
                class="wrap-list"
                :style="{flexDirection: 'column', alignItems: 'flex-start'}"
            >
                <p class="name">单列图片</p>
                <p class="name-desc">建议图片宽度≤750px，高度≤950px，支持png、jpg、gif</p>
                <div class="wrap-side">
                    <div
                        class="side-list"
                        v-if="!controList.data.image_url"
                    >
                        <i class="iconfont el-icon-hand-iconjia"/>
                        <p class="side-text">添加图片</p>
                    </div>
                    <div
                        class="side-content"
                        v-if="controList.data.image_url"
                    >
                        <div
                            :style="{backgroundImage: `url(${controList.data.image_url})`, backgroundSize: 'cover'}"
                            class="side-content-image"
                        />
                        <i
                            class="iconfont el-icon-hand-shanchu1"
                            @click="controList.data.image_url = ''"
                        />
                    </div>
                    <input
                        accept="image/*"
                        type="file"
                        class="upload-title-image"
                        @change="tirggerFile($event, 'single')"
                        @mouseenter="handEnterTab(controList.data.image_url)"
                        @mouseleave="tabFlag = false"
                    >
                    <div
                        class="upload-title-hover"
                        v-if="tabFlag"
                    >
                        <p class="title-hover">点击替换</p>
                    </div>
                </div>
            </div>
            <app-action
                v-if="initAction"
                @action="getAction"
                :action="JSON.stringify(controList.data.action.app_action || {})"
                :style="{marginLeft: '27px', pointerEvents: !controList.data.image_url ? 'none' : ''}"
            />
            <div
                class="wrap-list"
                :style="{marginBottom: '10px'}"
            >
                <p class="name">上下边距</p>
                <el-slider
                    v-model="controList.style.marginV"
                    :min="0"
                    :max="100"
                    :step="2"
                    :disabled="!controList.data.image_url"
                    :style="{width: '190px', marginLeft: '24px'}"
                />
                <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
            </div>
            <!-- <div
                class="wrap-list"
                :style="{marginBottom: '10px'}"
            >
                <p class="name">下边距</p>
                <el-slider
                    v-model="controList.style.marginB"
                    :min="0"
                    :max="100"
                    :step="2"
                    :disabled="!controList.data.image_url"
                    :style="{width: '190px', marginLeft: '24px'}"
                />
                <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
            </div> -->
            <div class="wrap-list">
                <p class="name">左右边距</p>
                <el-slider
                    v-model="controList.style.marginH"
                    :min="0"
                    :max="100"
                    :step="2"
                    :disabled="!controList.data.image_url"
                    :style="{width: '190px', marginLeft: '24px'}"
                />
                <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
            </div>
            <div class="wrap-list">
                <p class="name">背景颜色</p>
                <div
                    class="wrap-color"
                    :style="{marginLeft: '81px', pointerEvents: !controList.data.image_url ? 'none' : ''}"
                >
                    <el-color-picker
                        v-model="controList.style.backgroundColor"
                        show-alpha
                        class="edit-tab-bg"
                    />
                    <p
                        class="wrap-rest"
                        @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                    >
                        重置
                    </p>
                </div>
            </div>
            <div class="wrap-list">
                <p class="name">控件圆角值</p>
            </div>
            <div class="wrap-list">
                <div class="rate-main">
                    <div class="rate-main-ipt">
                        <img
                            src="@/assets/image/rate-main.png"
                            class="rate-wrap-bg"
                        >
                        <div class="rate-main-content">
                            <el-input
                                v-for="(option,index) in 4"
                                :key="index"
                                v-model="rate[index]"
                                size="mini"
                                @input="changeRate('single')"
                                :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                            />
                        </div>
                    </div>
                    <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                        输入数值设置四个角
                    </p>
                </div>
            </div>
        </div>

        <!-- 多图拼凑 -->
        <div
            v-if="Number(type) == 2 && JSON.stringify(controList) !== '{}'"
            class="edit-wrap"
        >
            <div class="edit-title">
                <p class="edit-title-text">多图拼凑</p>
            </div>
            <div
                class="wrap-list"
                :style="{flexDirection: 'column', alignItems: 'flex-start'}"
            >
                <p class="name">图片标题</p>
                <p
                    class="name-desc"
                    :style="{width: '335px', lineHeight: '18px'}"
                >建议图片宽度≤750px，高度≤950px，支持png、jpg、gif</p>
                <div
                    v-for="(option,i) in controList.data.images"
                    :key="i"
                    class="slider"
                    @mouseenter="sliderIndex = i"
                >
                    <div class="slider-head">
                        <p class="name">模块{{ i | filterNumber }}</p>
                        <i
                            class="iconfont el-icon-hand-close"
                            @click="deleteSlider(i)"
                        />
                    </div>
                    <div class="wrap-side">
                        <div
                            class="side-list"
                            v-if="!controList.data.images[i].image_url"
                        >
                            <i class="iconfont el-icon-hand-iconjia"/>
                            <p class="side-text">添加图片</p>
                        </div>
                        <div
                            class="side-content"
                            v-if="controList.data.images[i].image_url"
                        >
                            <div
                                :style="{backgroundImage: `url(${controList.data.images[i].image_url})`, backgroundSize: 'cover'}"
                                class="side-content-image"
                            />
                            <i
                                class="iconfont el-icon-hand-shanchu1"
                                @click="controList.data.images[i].image_url = ''"
                            />
                        </div>
                        <input
                            accept="image/*"
                            type="file"
                            class="upload-title-image"
                            @change="tirggerFile($event, 'slider', i)"
                            @mouseenter="handEnterTab(controList.data.images[i].image_url, i)"
                            @mouseleave="tabFlag = false"
                        >
                        <div
                            class="upload-title-hover"
                            v-if="tabFlag && sliderIndex == i"
                        >
                            <p class="title-hover">点击替换</p>
                        </div>
                    </div>
                    <app-action
                        v-if="initAction"
                        @action="getActionSlider"
                        :action="JSON.stringify(controList.data.images[i].action['app_action'])"
                        :style="{marginTop: '20px', pointerEvents: ''}"
                    />
                </div>
                <div :style="{border: '1px #F0F2F7 dashed', width: '375px', margin: '-24px 0 24px 0'}"/>
                <div
                    class="add-slider"
                    @click="addSlider(9)"
                >
                    <i class="iconfont el-icon-hand-iconjia"/>
                    添加图片{{ controList.data.images.length }}/9
                </div>
                <div :style="{border: '1px #F0F2F7 dashed', width: '375px', margin: '24px 0 24px 0'}"/>
                <div
                    class="wrap-multi"
                    :style="{marginLeft: '-20px'}"
                >
                    <div
                        class="wrap-list"
                        :style="{marginBottom: '10px'}"
                    >
                        <p class="name">上下边距</p>
                        <el-slider
                            v-model="controList.style.marginV"
                            :min="0"
                            :max="100"
                            :step="2"
                            :style="{width: '180px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginBottom: '10px'}"
                    >
                        <p class="name">左右边距</p>
                        <el-slider
                            v-model="controList.style.marginH"
                            :min="0"
                            :max="100"
                            :step="2"
                            :style="{width: '180px', marginLeft: '24px'}"
                        />
                        <p :style="{marginLeft: '10px', color: '#333333', fontSize: '14px'}">100PX</p>
                    </div>
                    <div class="wrap-list">
                        <p class="name">排列样式</p>
                        <el-radio
                            v-model="controList.style.columns"
                            :label="2"
                            :style="{marginLeft: '16px'}"
                        >
                            两图
                        </el-radio>
                        <el-radio
                            v-model="controList.style.columns"
                            :label="3"
                        >
                            三图
                        </el-radio>
                        <el-radio
                            v-model="controList.style.columns"
                            :label="4"
                        >
                            四图
                        </el-radio>
                    </div>
                    <div class="wrap-list">
                        <p class="name">背景颜色</p>
                        <div
                            class="wrap-color"
                            :style="{marginLeft: '55px'}"
                        >
                            <el-color-picker
                                v-model="controList.style.backgroundColor"
                                show-alpha
                                class="edit-tab-bg"
                            />
                            <p
                                class="wrap-rest"
                                @click="controList.style.backgroundColor = 'rgba(255,255,255,1)'"
                            >
                                重置
                            </p>
                        </div>
                    </div>
                    <div class="wrap-list">
                        <p class="name">控件圆角值</p>
                    </div>
                    <div
                        class="wrap-list"
                        :style="{marginTop: '0px', marginBottom: '0'}"
                    >
                        <div class="rate-main">
                            <div class="rate-main-ipt">
                                <img
                                    src="@/assets/image/rate-main.png"
                                    class="rate-wrap-bg"
                                >
                                <div class="rate-main-content">
                                    <el-input
                                        v-for="(option,index) in 4"
                                        :key="index"
                                        v-model="rate[index]"
                                        size="mini"
                                        @input="changeRate('multi')"
                                        :style="{width: '58px', height: '24px', marginTop: index > 1 ? '10px' : ''}"
                                    />
                                </div>
                            </div>
                            <p :style="{color: '#999999', fontSize: '12px', marginLeft: '12px'}">
                                输入数值设置四个角
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import appAction from '@/components/active-home/app-action.vue';
import draggable from 'vuedraggable';
export default {
    name: 'Edit',
    components: {
        appAction,
        draggable
    },
    props: {
        // 0: 基础配置
        type: {
            type: Number,
            default: () => {}
        },
        //页面总数据配置
        config: {
            type: Object,
            default: () => {}
        },
        //组件数据配置
        list: {
            type: Array,
            default: () => {}
        },
        id: {
            type: Number,
            default: () => {}
        },
        //删除组件通知
        message: {
            type: String,
            default: () => {}
        },
        //新增组件通知
        add: {
            type: String,
            default: () => {}
        },
        //监听top值变化
        top: {
            type: Number,
            default: () => {}
        }
    },
    watch: {
        //监听基本配置数据修改
        dataList: {
            handler: function (val, oldVal) {
                this.$emit('change', this.dataList);
            },
            deep: true
        },
        //监听组件类型变化
        type (value) {
            this.$nextTick(()=>{
                this.type = value;
                this.init();
            });
        },
        //监听点击组件，获取组件位置，确定编辑区域数据展示切换
        id (value) {
            this.loading = true;
            this.showEdit = true;
            this.initAction = false;

            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.initAction = true;
                    //回填自定义商品数据
                    if(this.list[this.id] === undefined) return false;
                },100);
                this.init();
                setTimeout(()=>{
                    this.loading = false;
                },300);
            });
        },
        //监听组件数据改变
        controList: {
            handler: function (val, oldVal) {
                // 判断当前轮播组件是否上传图片
                if(val.type == 2) {
                    let num = 0;

                    val.data.images.forEach(option => {
                        if(option.image_url) {
                            this.controList.status = true;
                        } else {
                            num++;
                        }
                    });

                    if(num == val.data.images.length) {
                        this.controList.status = false;
                    } else {
                        this.getImageHeight(val.data.images);
                    }
                }

                //十分重要，切换组件数据时会触发监听，需数据修改后向上传递
                if(Number(this.type == Number(val.type))) {
                    this.$emit('changeList', {
                        list: this.controList,
                        id: this.id
                    });
                }

                // 圆角处理
                this.getSetRate(this.type);

                console.log('修改后的数据llll:' + this.type, val.type, JSON.stringify(val));
            },
            deep: true
        },
        //接收删除通知，数据清空
        message (val) {
            this.showEdit = false;
            this.$notify({
                title: '提示',
                message: '删除成功',
                type: 'success',
                duration: 2000
            });
        },
        //添加组件执行
        add (val) {
            this.loading = true;
            this.$nextTick(()=>{
                this.init();
                setTimeout(()=>{
                    this.loading = false;
                },300);
            });
        },
        date (val) {
            console.log('@@@val@@@', val);
            if(val === null) {
                this.date = [];
            }
        },
        langDate (val) {
            console.log('@@@val2@@@', val);
            if(val) {
                this.$set(this.row, 'start_time', -1);
                this.$set(this.row, 'end_time', -1);
            }
        }
    },
    computed: {
        // 展示组件类型
        showControl () {
            console.log('--type--', this.type);
            return [1,2].includes(Number(this.type));
        }
    },
    filters: {
        filterNumber (val) {
            if(val == 0) {
                return '一';
            } else if (val == 1) {
                return '二';
            } else if (val == 2) {
                return '三';
            } else if (val == 3) {
                return '四';
            } else if (val == 4) {
                return '五';
            } else if (val == 5) {
                return '六';
            } else if (val == 6) {
                return '七';
            } else if (val == 7) {
                return '八';
            } else if (val == 8) {
                return '九';
            }
        }
    },
    data () {
        return {
            dataList: {},//拷贝基本配置数据
            row: {},//当前编辑区域数据
            tabFlag: false,//自定义标题hove
            controList: {},//拷贝当前组件数据
            initAction: true,//初始化跳转链接组件
            rate: [0,0,0,0],//单列图片圆角
            rateFlag: false,//单列图片圆角状态
            typeList: [],//商品组数据列表
            sliderIndex: -1,//记录轮播鼠标移入状态
            showEdit: true,//编辑区是否关闭，用于删除组件后调用
            loading: false,//加载loading，
            // 有效时间配置
            langDate: false,
            date: []
        };
    },
    mounted () {
        this.$nextTick(()=>{
            this.init();
            // console.log('当前展示组件编辑为:' + this.type);
            // console.log('当前组件列表数据:' + this.id, this.list);
        });
    },
    methods: {
        /**
         * @description 初始化编辑区
         */
        init () {
            setTimeout(()=>{
                switch (this.type) {
                    case 0:
                        this.dataList = JSON.parse(JSON.stringify(this.config));
                        this.row = this.dataList;
                        break;
                    // 单列图片
                    case 1:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化单列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 0,
                                marginB: 0,
                                marginH: 0,
                                backgroundColor: 'rgba(255,255,255,1)',
                                borderRadius: '0rpx 0rpx 0rpx 0rpx'
                            };
                        }
                        break;
                    // 多图拼凑
                    case 2:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化多列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                columns: 2,
                                marginV: 24,//上下
                                marginH: 24,//左右
                                backgroundColor: 'rgba(255,255,255,1)',
                                borderRadius: '0rpx 0rpx 0rpx 0rpx'
                            };
                        }
                        break;
                    // 新人专享
                    case 7:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化多列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 24
                            };
                        }
                        break;
                    // 临期商品
                    case 8:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化多列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 24
                            };
                        }
                        break;
                    // 折扣专区
                    case 9:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化多列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 24
                            };
                        }
                        break;
                    // 活动专区
                    case 10:
                        this.controList = JSON.parse(JSON.stringify(this.list[this.id]));

                        //无数据时初始化多列图片样式
                        if(JSON.stringify(this.controList.style) == '{}') {
                            this.controList.style = {
                                marginV: 24
                            };
                        }
                        break;
                    default:
                        break;
                }
            },60);
        },

        /**
         * @description 切换标题类型改变配置参数
         */
        changeTitle (type) {
            if(type == 2) {
                this.$set(this.row, 'title_background', 'rgba(255,255,255,1)');
            }
        },

        /**
         * @description 上传图片
         * @type  logo tab
         */
        tirggerFile (event, type, index) {
            let file = event.target.files[0];
            let form = new FormData();

            form.append("file", file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: form,
                success: resp => {
                    event.target.value = null;
                    if (resp.code == 1) {
                        if (type == 'single') {
                            this.controList.data.image_url = resp.data.url;
                        }else if (type == 'slider') {
                            this.controList.data.images[index].image_url = resp.data.url;
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                    }
                }
            });
        },

        /**
         * @description 获取图片高度
         */
        getImageHeight (imageList) {
            let listH = [];
            let listW = [];
            let url = imageList.reduce((cur,next) => {
                if(next.image_url) {
                    cur.push(next.image_url);
                }
                return cur;
            },[]);

            for(let key =0; key<url.length; key++) {
                let img = document.createElement('img');

                img.src = url[key];
                img.style.position = "absolute";
                img.style.visibility = 'hidden';
                document.getElementById('box').appendChild(img);

                this.$nextTick(()=>{//防止渲染后不能及时获取宽高
                    setTimeout(()=>{
                        let image = document.getElementById('box').children[document.getElementById('box').children.length - 1];

                        listH.push(image.offsetHeight);
                        listW.push(image.offsetWidth);
                    },200);
                });
            }

            setTimeout(()=>{
                let maxH = Math.max(...listH);
                let maxW = Math.max(...listW);
                let list = this.controList.style;

                this.$set(list, 'height', parseInt(maxH * (750 / maxW)));
            },400);
        },

        /**
         * @description 显示替换图片图层
         */
        handEnterTab (value, index) {
            this.sliderIndex = index;
            if(!value) return false;
            if(value) this.tabFlag = true;
        },

        /**
         * @description 获取app_action 单列图片
         */
        getAction (action) {
            let appAction = JSON.parse(action);

            let actions = this.controList.data.action;

            this.$set(actions, 'app_action', appAction);
        },

        /**
         * @description 获取app_action 轮播
         */
        getActionSlider (action) {
            let appAction = JSON.parse(action);

            this.controList.data.images[this.sliderIndex].action.app_action = appAction;
        },

        /**
         * @description 数据回填
         */
        getSetRate (type) {
            if(JSON.stringify(this.controList.style) !== '{}') {
                let radius = '';
                let list = [];

                if((type == 1 || type == 2) && !!this.controList.style.borderRadius) {
                    radius = this.controList.style.borderRadius;
                }

                radius.split(' ').forEach(option => {
                    list.push(Number(option.replace(/rpx/g, '')));
                });

                this.rate = list;
                this.rateFlag = !this.rateFlag;
            }
        },

        /**
         * @description 设置圆角
         */
        changeRate (type) {
            let rate = '';

            this.rate = this.rate.slice(0,4);
            this.rate.forEach(option => {
                rate += Number(option) + 'rpx ';
            });

            if(type == 'single' || type == 'slider' || type == 'multi') {
                this.controList.style.borderRadius = rate;
            } else if(type == 'cate') {
                this.controList.style.goodsBorderRadius = rate;
            } else if (type == 'custom') {
                this.controList.style.goodsBorderRadius = rate;
            }
        },

        /**
         * @description 批量设置圆角值
         */
        setRateValue (type) {
            let rate = '';
            let list = [];

            this.rate.forEach(option => {
                let num = '';

                if(type == 'down') {
                    num = option - 1 >= 0 ? option - 1 : 0;
                }
                if(type == 'up') {
                    num = Number(option) + 1;
                }
                list.push(num);
            });

            list = list.slice(0,4);
            list.forEach(option => {
                rate += option + 'rpx ';
            });
            this.rate = list;
            this.controList.style.borderRadius = rate;

        },

        /**
         * @description 添加轮播图/多图
         */
        addSlider (length) {
            if(this.controList.data.images.length == length) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以添加4个',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.controList.data.images.push({
                image_url: '',
                action: {
                    type: 1,
                    app_action: {}
                }
            });
        },

        /**
         * @description 删除轮播图/多图
         */
        deleteSlider (index) {
            if(this.controList.data.images.length == 1) {
                this.$notify({
                    title: '提示',
                    message: '至少保留一个',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.controList.data.images.splice(index, 1);
        }
    }
};
</script>

<style lang="less" scoped>
.edit {
    width: 375px;
    background: #ffffff;
    margin: 24px 0 0 72px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 703px;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    top: 0px;
    transition: all .2s;
    &::-webkit-scrollbar {
        width: 2px;
    }
    .edit-wrap {
        width: 375px;
        display: flex;
        flex-direction: column;
        .edit-title {
            width: 100%;
            height: 57px;
            box-sizing: border-box;
            padding-left: 20px;
            padding-right: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px #F0F2F7 solid;
            margin-bottom: 24px;
            &-text {
                color: #333333;
                font-size: 16px;
                font-weight: 500;
            }
            .el-icon-hand-close {
                font-size: 17px;
                color: #999999;
                cursor: pointer;
                &:hover {
                    color: #1890FF;
                }
            }
        }
        ._wrap {
            width: 346px;
            flex: 1;
            margin: 0 20px;
            box-sizing: border-box;
            ._wrap_item {
                display: flex;
                flex-wrap: wrap;
                margin: 0 9px 10px 0;
                position: relative;
                &:hover {
                    ._wrap_icon {
                        display: block;
                    }
                }
            }
            ._wrap_image {
                width: 60px;
                height: 60px;
                cursor: pointer;
            }
            ._wrap_icon {
                position: absolute;
                top: -8px;
                right: -8px;
                z-index: 99;
                background-color: #ffffff;
                cursor: pointer;
                display: none;
                border-radius: 50%;
                width: 17px;
                height: 17px;
                border-radius: 50%;
                overflow: hidden;
            }
            .el-icon-error {
                color: rgba(0, 0, 0, 1);
                font-size: 17px;
            }
            ._wrap_item:net-child(5n + 5) {
                margin-right: 0;
            }
        }
        ._coupon {
            margin-left: 20px;
            margin-right: 20px;
            box-sizing: border-box;
            ._coupon_title {
                font-size: 14px;
                counter-reset: rgba(51, 51, 51, 1);
                position: relative;
                &::before {
                    content: '*';
                    position: absolute;
                    color: rgba(255, 48, 48, 1);
                    font-size: 14px;
                    top: -1px;
                    left: -7px;
                }
            }
            ._coupon_desc {
                font-size: 12px;
                color: rgba(153, 153, 153, 1);
                margin: 10px 0;
            }
            ._coupon_wrap {
                width: 100%;
                background-color: rgba(251, 251, 251, 1);
                box-sizing: border-box;
                padding: 16px 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                ._coupon_item {
                    width: 295px;
                    height: 37px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    border: 1px solid #F0F2F7;
                    text-align: center;
                    line-height: 37px;
                    cursor: pointer;
                    position: relative;
                    box-sizing: border-box;
                    padding: 0 15px;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    ._coupon_item_cont {
                        width: 265px;
                        height: 37px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    &:hover {
                        ._coupon_delete {
                            display: block;
                        }
                    }
                    ._coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 12px;
                        margin-right: 6px;
                        white-space: nowrap;
                    }
                    ._coupon_info {
                        color: rgba(245, 51, 65, 1);
                        font-size: 12px;
                        white-space: nowrap;
                    }
                    ._coupon_delete {
                        width: 17px;
                        height: 17px;
                        border-radius: 50%;
                        background-color: #ffffff;
                        position: absolute;
                        top: -7px;
                        right: -7px;
                        z-index: 99;
                        cursor: pointer;
                        display: none;
                        .el-icon-error {
                            color: #000000;
                            font-size: 17px;
                        }
                    }
                }
                ._coupon_add {
                    width: 295px;
                    height: 37px;
                    background: #FBFBFB;
                    border-radius: 4px;
                    border: 1px solid #1890FF;
                    text-align: center;
                    line-height: 37px;
                    cursor: pointer;
                    color: rgba(24, 144, 255, 1);
                    .el-icon-plus {
                        margin-right: 3px;
                        font-size: 14px;
                        color: rgba(24, 144, 255, 1);
                    }
                }
            }
            ._coupon_line {
                width: 100%;
                border: 1px rgba(240, 242, 247, 1) dashed;
                margin: 24px 0;
            }
            ._coupon_list {
                display: flex;
                align-items: flex-start;
                margin-bottom: 24px;
                ._coupon_title {
                    font-size: 14px;
                    counter-reset: rgba(51, 51, 51, 1);
                    position: relative;
                    white-space: nowrap;
                    &::before {
                        content: '*';
                        position: absolute;
                        color: rgba(255, 48, 48, 1);
                        font-size: 14px;
                        top: -1px;
                        left: -7px;
                    }
                }
                ._coupon_arr {
                    flex: 1;
                    display: flex;
                    align-items: flex-start;
                }
            }
        }
        .wrap-list, .cate-list, .goodsTag {
            min-height: 14px;
            display: flex;
            align-items: center;
            width: 375px;
            box-sizing: border-box;
            padding-left: 28px;
            margin-bottom: 24px;
            ._nav {
                flex: 1;
                height: 36px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                margin-right: 20px;
                margin-left: 16px;
                ._nav_button {
                    width: 88px;
                    height: 36px;
                    box-sizing: border-box;
                    border: 1px rgba(24, 144, 255, 1) solid;
                    border-radius: 18px;
                    text-align: center;
                    line-height: 36px;
                    cursor: pointer;
                    color: rgba(24, 144, 255, 1);
                    font-size: 14px;
                }
                ._nav_clear {
                    color: rgba(24, 144, 255, 1);
                    font-size: 14px;
                    cursor: pointer;
                    margin-right: 16px;
                }
                ._nav_edit {
                    width: 70px;
                    height: 36px;
                    box-sizing: border-box;
                    border: 1px rgba(24, 144, 255, 1) solid;
                    border-radius: 18px;
                    text-align: center;
                    line-height: 36px;
                    cursor: pointer;
                    color: rgba(24, 144, 255, 1);
                    font-size: 14px;
                }
            }
            .name {
                color: #333333;
                font-size: 14px;
                position: relative;
                white-space: nowrap;
                &::before {
                    content: '*';
                    position: absolute;
                    top: 0;
                    left: -8px;
                    color: #FF3030;
                    font-size: 15px;
                }
            }
            .name-desc {
                color: #999999;
                font-size: 12px;
                margin-top: 10px;
                margin-bottom: 10px;
                line-height: 18px;
                width: 335px;
            }
            .wrap-side {
                width: 335px;
                height: 64px;
                background: #FBFBFB;
                position: relative;
                cursor: pointer;
                .side-list {
                    width: 335px;
                    height: 64px;
                    display: flex;
                    justify-content: center;
                    border: 1px dashed #D8D8D8;
                    align-items: center;
                    .el-icon-hand-iconjia {
                        color: #88909C;
                        font-size: 14px;
                    }
                    .side-text {
                        color: #88909C;
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }
                .side-content {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 335px;
                    height: 64px;
                    display: flex;
                    align-items: center;
                    &-image {
                        width: 296px;
                        height: 64px;
                        margin-right: 11px;
                    }
                    .el-icon-hand-shanchu1 {
                        color: #333333;
                        font-size: 18px;
                        cursor: pointer;
                    }
                }
                .upload-title-image {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 296px;
                    height: 64px;
                    z-index: 10;
                    opacity: 0;
                }
                .upload-title-hover {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 296px;
                    height: 64px;
                    z-index: 5;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(0,0,0,.6);
                    .title-hover {
                        width: 72px;
                        height: 26px;
                        border-radius: 13px;
                        border: 1px solid #FFFFFF;
                        text-align: center;
                        line-height: 26px;
                        color: #ffffff;
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
            }
            .names {
                color: #333333;
                font-size: 14px;
                margin-right: 10px;
                margin-top: 3px;
            }
            .wrap-color {
                width: 196px;
                height: 36px;
                background: #FBFBFB;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                display: flex;
                align-items: center;
                margin-left: 47px;
                position: relative;
            }
            .wrap-rest {
                width: 60px;
                height: 36px;
                position: absolute;
                top: 0;
                right: 0;
                color: #333333;
                font-size: 14px;
                cursor: pointer;
                border-left: 1px #DCDFE6 solid;
                text-align: center;
                line-height: 36px;
            }
            .upload {
                height: 68px;
                display: flex;
                align-items: center;
                cursor: pointer;
                .upload-wrap {
                    width: 68px;
                    height: 68px;
                    box-sizing: border-box;
                    border: 1px dashed #D8D8D8;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    .el-icon-hand-iconjia {
                        font-size: 16px;
                        color: #88909C;
                        margin-top: 14px;
                    }
                    .upload-text {
                        color: #88909C;
                        font-size: 12px;
                        margin-top: 6px;
                    }
                    .upload-image {
                        position: absolute;
                        width: 68px;
                        height: 68px;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        cursor: pointer;
                    }
                    .upload-good-image {
                        position: absolute;
                        width: 68px;
                        height: 68px;
                        left: 0;
                        top: 0;
                        z-index: 2;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
                .upload-desc {
                    color: #999999;
                    font-size: 12px;
                    margin-left: 10px;
                    height: 68px;
                    line-height: 123px;
                }
            }

            //圆角
            .rate {
                height: 36px;
                display: flex;
                flex-direction: row;
                margin-left: 87px;
                align-items: center;
                cursor: pointer;
                position: relative;
                .rate-icon {
                    width: 36px;
                    height: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10px;
                    background: #FBFBFB;
                    position: relative;
                    z-index: 999;
                    i {
                        font-size: 24px;
                        color: #999;
                    }
                }
                .rate-wrap {
                    width: 194px;
                    height: 124px;
                    box-sizing: border-box;
                    border-radius: 4px;
                    position: absolute;
                    left: -192px;
                    top: -42px;
                    .rate-wrap-bg {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 194px;
                        height: 124px;
                        z-index: 2;
                    }
                    .rate-wrap-content {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 194px;
                        height: 124px;
                        z-index: 10;
                        padding: 22px 32px;
                        flex-wrap: wrap;
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }
            .rate-main {
                width: 335px;
                height: 108px;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                background: #FBFBFB;
                padding-left: 20px;
                .rate-main-ipt {
                    position: relative;
                    width: 146px;
                    height: 78px;
                    .rate-wrap-bg {
                        width: 146px;
                        height: 78px;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    .rate-main-content {
                        width: 146px;
                        height: 78px;
                        display: flex;
                        flex-wrap: wrap;
                        box-sizing: border-box;
                        padding: 9px 11px;
                        justify-content: space-between;
                    }
                }
            }

            //轮播
            .slider {
                display: flex;
                flex-direction: column;
                margin-bottom: 24px;
                .slider-head {
                    height: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    cursor: pointer;
                }
            }
            .add-slider {
                width: 335px;
                height: 34px;
                background: #FBFBFB;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px dashed #D8D8D8;
                color: #1890FF;
                font-size: 12px;
                cursor: pointer;
                .el-icon-hand-iconjia {
                    color: #1890FF;
                    font-size: 12px;
                    margin-right: 10px;
                }
            }
            //多图
            .wrap-multi {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
        }
        .wrap-cate {
            width: 335px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            margin: 0 0 24px 20px;
            padding: 16px 20px;
            padding-left: 50px;
            .cate-list {
                height: 36px;
                display: flex;
                align-items: center;
                .cate-text {
                    color: #333333;
                    font-size: 14px;
                    margin-right: 15px;
                    white-space: nowrap;
                }
            }
        }
        .left {
            padding-left: 0px;
            align-items: flex-start;
        }
        .wrap-share {
            width: 335px;
            background: #FBFBFB;
            box-sizing: border-box;
            padding: 20px;
            margin-left: 20px;
        }
        .wrap-content {
            display: flex;
            flex-direction: column;
            .wrap-title-text {
                margin-left: 16px;
            }
        }
        //角标
        .goodsTag {
            width: 335px;
            background: #FBFBFB;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-top: 20px;
            margin-left: 20px;
            .goodsTag-title {
                color: #333333;
                font-size: 14px;
                height: 14px;
                margin-bottom: 20px;
                margin-left: 20px;
            }
            .tag-selecr {
                display: flex;
                height: 16px;
                align-items: center;
            }
            .goodsTag-wrap {
                display: flex;
                width: 100%;
                flex-direction: column;
                .tag-title {
                    color: #333333;
                    font-size: 12px;
                    margin-left: 20px;
                    margin-top: 20px;
                    margin-bottom: 16px;
                }
            }
        }
        // 倒计时
        ._count {
            width: 100%;
            padding: 0 20px 20px 20px;
            ._count_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                font-weight: 500;
            }
            ._count_text {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                position: relative;
                margin-left: 5px;
                &::before {
                    content: '*';
                    position: absolute;
                    left: -6px;
                    top: 0;
                    color: rgba(255, 48, 48, 1);
                }
            }
            ._count_item {
                height: 36px;
                width: 100%;
                display: flex;
                margin-top: 24px;
                align-items: center;
                .wrap-color {
                    width: 196px;
                    height: 36px;
                    background: #FBFBFB;
                    border-radius: 4px;
                    border: 1px solid #DCDFE6;
                    display: flex;
                    align-items: center;
                    margin-left: 47px;
                    position: relative;
                }
                .wrap-rest {
                    width: 60px;
                    height: 36px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    color: #333333;
                    font-size: 14px;
                    cursor: pointer;
                    border-left: 1px #DCDFE6 solid;
                    text-align: center;
                    line-height: 36px;
                }
            }
            ._count_list {
                height: 15px;
                display: flex;
                align-items: center;
                margin-top: 24px;
            }
            ._count_line {
                width: 100%;
                border: 1px rgba(240, 242, 247, 1) dashed;
                margin: 24px 0;
            }
        }

        // 自定义优惠券
        .__coupon {
            width: 100%;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            // border: 1px red solid;
            .__coupon_items {
                width: 335px;
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                border-bottom: 1px rgba(240, 242, 247, 1) dashed;
                padding-bottom: 20px;
                margin-bottom: 20px;
                .__coupon_header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    p {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        position: relative;
                        &::before {
                            content: '*';
                            position: absolute;
                            left: -7px;
                            top: 0px;
                            color: rgba(255, 48, 48, 1);
                            font-size: 14px;
                        }
                    }
                    .el-icon-hand-close {
                        color: rgba(51, 51, 51, 1);
                        font-size: 16px;
                        cursor: pointer;
                    }
                }
                .__coupon_img {
                    width: 335px;
                    height: 64px;
                    display: flex;
                    align-items: center;
                    .__coupon_left {
                        width: 296px;
                        height: 64px;
                        position: relative;
                        cursor: pointer;
                        .__coupon_cover {
                            width: 296px;
                            height: 64px;
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                        .__coupon_tc {
                            width: 296px;
                            height: 64px;
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 10;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background: rgba(0, 0, 0, .6);
                            p {
                                width: 72px;
                                height: 26px;
                                border-radius: 13px;
                                border: 1px rgba(255, 255, 255, 1) solid;
                                text-align: center;
                                line-height: 26px;
                                color: rgba(255, 255, 255, 1);
                                font-size: 12px;
                            }
                        }
                        .upload_title_image {
                            width: 296px;
                            height: 64px;
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 11;
                            opacity: 0;
                            cursor: pointer;
                        }
                    }
                    .__coupon_delete {
                        width: 18px;
                        height: 20px;
                        margin-left: 11px;
                        cursor: pointer;
                    }
                }
                .__coupon_add {
                    width: 335px;
                    height: 36px;
                    border: 1px rgba(32, 160, 255, 1) dashed;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: rgba(32, 160, 255, 1);
                    font-size: 12px;
                    margin: 10px 0;
                    cursor: pointer;
                    .iconfont {
                        color: rgba(32, 160, 255, 1);
                        font-size: 16px;
                        margin-right: 10px;
                    }
                }
                .__coupon_data {
                    width: 335px;
                    height: 36px;
                    border: 1px rgba(240, 242, 247, 1) solid;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 10px 0;
                    cursor: pointer;
                    .__coupon_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 12px;
                        margin-right: 6px;
                    }
                    .__coupon_limit {
                        color: rgba(245, 51, 65, 1);
                        font-size: 12px;
                    }
                }
                .__coupon_change {
                    width: 335px;
                    height: 64px;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px rgba(216, 216, 216, 1) dashed;
                    background: rgba(251, 251, 251, 1);
                    cursor: pointer;
                    .upload-title-image {
                        width: 335px;
                        height: 64px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 10;
                        opacity: 0;
                        cursor: pointer;
                    }
                    .__coupon_img_url {
                        width: 335px;
                        height: 64px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: rgba(136, 144, 156, 1);
                        font-size: 12px;
                        .iconfont {
                            color: rgba(136, 144, 156, 1);
                            font-size: 16px;
                            margin-right: 10px;
                        }
                    }
                }
            }
            .__add_coupon {
                width: 335px;
                height: 34px;
                border: 1px rgba(24, 144, 255, 1) solid;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 24px;
                margin-left: 20px;
                cursor: pointer;
                color: rgba(24, 144, 255, 1);
                font-size: 12px;
                .iconfont {
                    font-size: 16px;
                    color: rgba(24, 144, 255, 1);
                    margin-right: 9px;
                }
            }
            .__coupon_lines {
               border-top: 1px rgba(240, 242, 247, 1) dashed;
               margin-bottom: 24px;
            }
            .__coupon_set {
                width: 335px;
                box-sizing: border-box;
                padding: 0 20px;
                .__coupon_set_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    font-weight: 500;
                    margin-bottom: 14px;
                }
                .__coupon_slider {
                    width: 335px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 6px;
                    .__coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 16px;
                    }
                    .__coupon_max {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }
                .__coupon_radio {
                    width: 335px;
                    display: flex;
                    align-items: flex-start;
                    margin-top: 20px;
                    .__coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 15px;
                        position: relative;
                        white-space: nowrap;
                        &::before {
                            content: '*';
                            position: absolute;
                            left: -7px;
                            top: 0px;
                            color: rgba(255, 48, 48, 1);
                            font-size: 14px;
                        }
                    }
                    .__coupon_list {
                        width: 264px;
                        display: flex;
                        flex-wrap: wrap;
                    }
                }
                .__coupon_preview {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 20px;
                    width: 335px;
                    .__coupon_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                        margin-right: 15px;
                        position: relative;
                        white-space: nowrap;
                        &::before {
                            content: '*';
                            position: absolute;
                            left: -7px;
                            top: 0px;
                            color: rgba(255, 48, 48, 1);
                            font-size: 14px;
                        }
                    }
                }
                .__coupon_width {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                    width: 335px;
                    .__coupon_px {
                        color: rgba(153, 153, 153, 1);
                        font-size: 12px;
                        position: relative;
                        left: -30px;
                        z-index: 10;
                    }
                }
                .__coupon_color {
                    width: 100%;
                    height: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    .__coupon_color_name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                    }
                    .wrap-color {
                        width: 196px;
                        height: 36px;
                        background: #FBFBFB;
                        border-radius: 4px;
                        border: 1px solid #DCDFE6;
                        display: flex;
                        align-items: center;
                        margin-left: 47px;
                        position: relative;
                        .wrap-rest {
                            width: 60px;
                            height: 36px;
                            position: absolute;
                            top: 0;
                            right: 0;
                            color: #333333;
                            font-size: 14px;
                            cursor: pointer;
                            border-left: 1px #DCDFE6 solid;
                            text-align: center;
                            line-height: 36px;
                        }
                    }
                }
                .__coupon_config {
                    width: 335px;
                    height: 210px;
                    background: #f8f8f8;
                    box-sizing: border-box;
                    padding: 20px;
                    margin-top: 13px;
                    .__coupon_color {
                        width: 100%;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 10px;
                        .__coupon_color_name {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                        }
                        .wrap-color {
                            width: 196px;
                            height: 36px;
                            background: #FBFBFB;
                            border-radius: 4px;
                            border: 1px solid #DCDFE6;
                            display: flex;
                            align-items: center;
                            margin-left: 47px;
                            position: relative;
                            .wrap-rest {
                                width: 60px;
                                height: 36px;
                                position: absolute;
                                top: 0;
                                right: 0;
                                color: #333333;
                                font-size: 14px;
                                cursor: pointer;
                                border-left: 1px #DCDFE6 solid;
                                text-align: center;
                                line-height: 36px;
                            }
                        }
                    }
                    .__coupon_slider {
                        width: 295px;
                        display: flex;
                        align-items: center;
                        margin-bottom: 2px;
                        .__coupon_name {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            margin-right: 16px;
                        }
                        .__coupon_max {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                            margin-left: 10px;
                        }
                    }
                    .__coupon_remark {
                        color: rgba(153, 153, 153, 1);
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.editControlActive {
    .el-radio {
        margin-right: 24px;
    }
    .el-radio__label {
        padding-left: 6px;
    }
    .el-input__inner, .el-textarea__inner {
        background: #FBFBFB;
    }
    .edit-tab-bg, .el-color-picker__trigger {
        width: 96px;
        height: 20px;
        padding: 0;
    }
    .el-color-picker__trigger {
        margin-left: 20px;
        border: 1px solid #000000;
        border-radius: 0px;
    }
    .el-color-picker__color {
        border: none;
    }
    .el-icon-arrow-down:before {
        content: "";
    }
    .uploadControl {
        .el-upload__input {
            width: 68px;
            height: 68px;
            display: block;
        }
        .el-upload--picture-card {
            width: 68px;
            height: 68px;
        }
    }
    .el-slider__button {
        border: 2px solid #2FBDB3;
    }
    .el-slider__bar {
        background-color: #2FBDB3;
    }
    ._coupon_arr {
        .el-radio {
            .el-radio__label {
                margin-left: 0px;
            }
        }
    }
    .__coupon_list {
        .el-radio__label {
            padding-left: 3px;
        }
        .el-radio {
            margin-right: 11px;
        }
    }
    .el-date-editor .el-range-separator {
        padding: 0 16px;
    }
}
</style>